<template>
  <div class="app-container h-100">
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="水源地分类">
        <el-select v-model="queryParams.dataTypeid" placeholder="请选择">
          <el-option v-for="item in dataTypeList" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="水源地名称">
        <el-input v-model="queryParams.drinkSourceName" placeholder="请输入水源地名称"></el-input>
      </el-form-item>

      <el-form-item label="查询时间段">
        <el-date-picker
          v-model="queryParams.dateRange"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM"
          format="yyyy-MM"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <!-- <el-button @click="handleExport">导出</el-button> -->
      </el-form-item>
    </el-form>

    <!-- 标签页 -->
    <el-tabs v-model="queryParams.dataType" style="flex-grow: 1;" @tab-click="tabhandleClick">
      <el-tab-pane label="达标数据" name="0"></el-tab-pane>
      <el-tab-pane label="未达标数据" name="1"></el-tab-pane>
      <el-tab-pane label="图表" name="3"></el-tab-pane>
    </el-tabs>
     <div class="d-flex a-center j-between">
        <!-- <el-radio-group v-model="pageDataType" class="mb-10">
            <el-radio-button label="列表">
                <i class="el-icon-s-grid"></i>
                列表
            </el-radio-button>
            <el-radio-button label="图表">
                <i class="el-icon-s-data"></i>
                图表
            </el-radio-button>
        </el-radio-group> -->
     </div>

    <!-- 表格 -->

    <el-table v-if="queryParams.dataType != 3" :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="province" label="省份"></el-table-column>
      <el-table-column prop="county" label="城市（城镇）"></el-table-column>
      <el-table-column prop="drinksourceName" label="水源地名称"></el-table-column>
      <el-table-column prop="drinksourceTypeName" label="水源地类型"></el-table-column>
      <el-table-column prop="qualityLevelName" label="时间段水质类别">
        <template #default="{ row }">
          <el-tag :type="getTagType(row.qualityLevel)" size="small">{{ row.qualityLevelName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dbMonths" label="达标月份"></el-table-column>
      <el-table-column prop="dbqsl" label="达标取水量（万吨）"></el-table-column>
      <el-table-column prop="populationCovered" label="涉及服务人口（万人）"></el-table-column>
      <el-table-column prop="waterVolume" label="水量达标率"></el-table-column>
      <el-table-column prop="isover" label="水源达标率"></el-table-column>
      <el-table-column prop="evaluationScore" label="达标状况评估得分"></el-table-column>
      <el-table-column prop="evaluationResults" label="达标状况评估结果"></el-table-column>
    </el-table>
    <el-pagination
        v-if="queryParams.dataType != 3"
        v-show="total>0"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        :pager-count="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        >
    </el-pagination>
    <div class="chart-box"  style="height: calc(100% - 112px);" v-if="queryParams.dataType == 3">
        <div ref="chartRef"  style="height: 100%; width: 100%"></div>
    </div>
  </div>
</template>

<script>
import {isoverDrinkSourcelist,drinkSourcewaterQuality} from './api.js';
import * as echarts from "echarts";
export default {
  data() {
    return {
      queryParams: {
        dataTypeid: '1',
        dataType:'0',
        drinkSourceName:'',
        dateRange: ['2024-11', '2024-11'],
        pageNum: 1,
        pageSize: 10
      },
      pageDataType:'列表',

      // 1区划 2水源地类型 3水源地级别 类型传参 单个参数
      dataTypeList: [
        { label: '区划', value: '1' },
        { label: '水源地类型', value: '2' },
        { label: '水源地级别', value: '3' }
      ],

      activeTab: 'qualified',
      tableData: [],
      total:0,
      loading:false,
    };
  },
  created() { 
    let beginTime = $moment().offset('month',-6).format('{yyyy}-{mm}');
    let endTime = $moment().format('{yyyy}-{mm}');
    this.queryParams.dateRange = [beginTime, endTime];
    this.getList();
  },
  methods: {
    async getList(){
        let apiParams = {...this.queryParams};
        apiParams.beginTime = this.queryParams.dateRange[0];
        apiParams.endTime = this.queryParams.dateRange[1];
        delete apiParams.dateRange;
        this.loading = true;
        let apiFn  = isoverDrinkSourcelist;
        if(apiParams.dataType == '3') {
            apiFn = drinkSourcewaterQuality;
            delete apiParams.dataType;
            delete apiParams.pageNum;
            delete apiParams.pageSize;
        }
        let res = await apiFn(apiParams);
        if(this.queryParams.dataType == '3'){
            this.chartInit(res.data)
        } else {
            this.tableData = res.data;
            this.total = res.total;
            this.loading = false;
        }
    },
    chartInit(data){
        let series = [];
        let rowsMap = {};
        for(let item of data.dataList){
            for(let lItem of item.list) {
                if(!rowsMap[lItem.levelName]){
                    // 检查是否为无类别，如果是则设置为淡灰色
                    const isNoCategory = lItem.levelName === '无类别';
                    rowsMap[lItem.levelName] = {
                        name: lItem.levelName,
                        type:'bar',
                        stack:'1',
                        data: [],
                        // 如果是无类别，设置为淡灰色
                        itemStyle: isNoCategory ? { color: '#BDBDBD' } : undefined
                    }  
                }
                rowsMap[lItem.levelName].data.push(lItem.proportion)
            }
        }
        series = Object.values(rowsMap);
        let options = {
            legend: {
                data: data.levelName,
                type: "scroll",
                textStyle: { fontSize: 12 },
            },
            tooltip: {},
            grid: {
                left: "15%",
                right: "15%",
                bottom: "10%",
                top: "15%",
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                data: data.countyList,
            },
            toolbox: {
                feature: {
                magicType: {
                    type: ['stack']
                },
                dataView: {}
                }
            },
            yAxis:{

            },
            series: series,
        }
        this.echartInit = echarts.init(this.$refs.chartRef);
        this.echartInit.setOption(options,true);
    },
    handleSizeChange(val){
        this.queryParams.pageSize = val;
        this.queryParams.pageNum = 1;
        this.getList();
     },
    handleCurrentChange(val){ 
        this.queryParams.pageNum = val;
        this.getList();
    },
    handleSearch() {
        this.getList();
    },
    tabhandleClick(){
        this.getList();
    },
    handleExport() {
      console.log('导出');
    },
    getTagType(level) {
      if (level == '1') return 'success';
      if (level == '2') return 'Warning';
      if (level == '3') return 'danger';
      return 'info';
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>